<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>我是家长</title>
		<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1.0, user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../css/mui.min.css">
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/jquery-1.8.3.min.js"></script>
		<style>
			*{
				margin: 0px;
				border: 0px;
				padding: 0px;
			}
			html,
			body {
				font-family: "microsoft yahei";
				background-color: #efeff4;
				color: #616161;
			}
			
			#dv_rightHearder ul li {
				float: left;
			}
			
			#dv_nav ul li {
				font-size: 13px;
				float: left;
				margin-left: 6px;
				margin-right: 6px;
				list-style-type: none;
				color: #909090;
			}
			
			#topPopover {
				position: fixed;
				top: 16px;
				right: 6px;
			}
			
			#topPopover .mui-popover-arrow {
				left: auto;
				right: 6px;
			}
			
		</style>
	</head>

	<body>
		<div id="topPopover" class="mui-popover" style="height: 280px; width: 250px; font-size: 28px;">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view">
						<li id="logout" class="mui-table-view-cell" style="display: flex;">
							<img src="../../img/index/tianjiarenyuanrubiao_03.png" width="42" height="42" />&nbsp;&nbsp;&nbsp;&nbsp;
							<a>身份切换</a>
						</li>
						<li class="mui-table-view-cell" style="display: flex;">
							<img src="../../img/index/tianjia_05.png" width="42" height="42" />&nbsp;&nbsp;&nbsp;&nbsp;
							<a href="#">邀请亲友</a>
						</li>
						<li class="mui-table-view-cell" style="display: flex;">
							<img src="../../img/index/denglutubiao_03.png" width="42" height="42" />&nbsp;&nbsp;&nbsp;&nbsp;
							<a href="login.html">登录</a>
						</li>
						<li class="mui-table-view-cell" style="display: flex;">
							<img src="../../img/index/zhuce_11.png" width="42" height="42" />&nbsp;&nbsp;&nbsp;&nbsp;
							<a href="reg.html">注册</a>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<nav id="nav_dbdh" class="mui-bar mui-bar-tab" style="background-color: #F1ecdf; height: 68px; font-size: 18px;">
			<a id="defaultTab" class="mui-tab-item mui-active">
				<img id="sp_zy" src="../../img/index/home-48_03.png" style="height: 36px; width: 36px;"  /><br />
				<span class="mui-tab-label" style="padding-top: 7px; margin-left: -14px;">&nbsp;&nbsp;主页</span>
			</a>

			<a id="dv_bar_wxy" class="mui-tab-item">
				<img id="sp_wxy" src="../../img/index/mini46-before_06.png" style="height: 36px; width: 36px;"  /><br />
				<span class="mui-tab-label" style="padding-top: 7px; margin-left: -10px;">&nbsp;&nbsp;微校园</span>
			</a>

			<a id="dv_bar_grzx" class="mui-tab-item">
				<img id="sp_grzx" src="../../img/index/personal46_10.png" style="height: 36px; width: 36px;"  /><br />
				<span class="mui-tab-label" style="padding-top: 7px; margin-left: -12px;">个人中心</span>
			</a>
		</nav>

		<script>
			/**
			 * 监听底部导航事件，用于更改其背景图标
			 */
			document.getElementById("defaultTab").addEventListener("tap", function() {
				window.title = "家长学校";
				document.getElementById("sp_zy").src = "../../img/index/home-48_03.png";
				document.getElementById("sp_wxy").src = "../../img/index/mini46-before_06.png";
				document.getElementById("sp_grzx").src = "../../img/index/personal46_10.png";
			});

			document.getElementById("dv_bar_wxy").addEventListener("tap", function() {
				window.title = "微校园"
				document.getElementById("sp_zy").src = "../../img/index/home48-before_03.png";
				document.getElementById("sp_wxy").src = "../../img/index/mini46_06.png";
				document.getElementById("sp_grzx").src = "../../img/index/personal46_10.png";
				mui.openWindow({
					url : "test1.html"
				});
			});

			var $userLogin = JSON.parse(localStorage.getItem("login-user-parent"));
			document.getElementById("dv_bar_grzx").addEventListener("tap", function() {
				window.title = "个人中心"
				//登录用户
				document.getElementById("sp_zy").src = "../../img/index/home48-before_03.png";
				document.getElementById("sp_wxy").src = "../../img/index/mini46-before_06.png";
				document.getElementById("sp_grzx").src = "../../img/index/icon_03.png";
				mui.openWindow({
					url : "test3.html"
				});
			});
		</script>

		<div class="mui-content" style="width: 100%;">
			<!--
            	作者：xuzhao_deng@sina.com
            	时间：2016-12-01
            	描述：首页内容
            -->
			<div id="homePage-content" class="mui-control-content mui-active" style="width: 100%;">
				<!--
                	作者：xuzhao_deng@sina.com
                	时间：2016-12-01
                	描述：小喇叭
                -->
				<div id="dv_posts" class="posts" style="background-color: #FFF6E1; font-size: 11px; height: 40px; margin-top: 0px; width: 100%; border: 0px; padding-top: 4px; margin: 0px;">
					
					<div style="float: left; width: 100%; display: flex;">
						<div style=" margin-top: 2px;">
							<img src="../../img/index/laba_03.png" width="24" height="24"/>
						</div>
						<div style="margin-top: 3px; margin-left: 5px;">
							<span style="color: #909090;"><a href="html/posts/posts-index.html">
								父母上岗培训，学习育儿知识，点亮“认证小徽章”
							</a></span>
						</div>
					</div>
					
					<div id="dvclose" style="float: right; margin-top: -28px; margin-right: 3px;">
						<img id="imgclose" onclick="func_close();" src="../../img/index/delete_03.png"/>
					</div>
				</div>
				
				<!--
                	作者：xuzhao_deng@sina.com
                	时间：2016-12-07
                	描述：隐藏小喇叭通知
                -->
				<div id="dv_posts_h" class="posts" style="height: 30px; width: 100%; display: none;">
					<div style="margin-top: 5px;"> 
						<a id="a_xianshi_posts" style="">
							<img src="../../img/index/wusheng_03.png" width="24" height="24" />
						</a>
					</div>
				</div>
				
				<!--
                	作者：xuzhao_deng@sina.com
                	时间：2016-12-01
                	描述：背景封面
                -->
				<div id="dv_img" class="dvimgs" style="text-align: center; width: 100%; margin-top: 3px;">
					<div style="width: 100%;">
						<img src="../../img/index/fengmian_02.png" style="width: 100%;" height="178"/>
					</div>
					<div style="margin: -170px 0px 0px -120px;">
						<img src="../../img/index/head-portrait-box_03.png" style="" height="100" width="100" />
					</div>
					<div style="margin: -103px 139px 0px 0px;">
						<img src="../../img/index/head-portrait_06.png" style="" width="96" height="96" />
						<img src="../../img/index/medal_03.png" style="margin-left: -60px; margin-bottom: -10px;" />
					</div>
					
					<div style="margin: 10px 0px 0px -100px;">
						<div>
							<img src="../../img/index/name-box_03.png" style="height: 32px;" />
						</div>
						<div style="margin-top: -35px;">
							<span id="login-userName" style="font-size: 15px;">我是一只小小鸟</span>
						</div>
					</div>
					
				</div>

				<!--
                	作者：xuzhao_deng@sina.com
                	时间：2016-12-01
                	描述：通知内容
                -->
				<div id="dv-job-notic" style="display: none;">
					<div style=" background: url(../../img/index/notice-box_02.png); height: 80px; display: flex; text-align: left; color: #909090; font-size: 24px; margin-bottom: 20px; margin-top: 20px;">
						<span style="width: 14%; text-align: left; margin-top: -12px; margin-left: 19px;">
							<p style="line-height: 130%; font-size: 26px;">今日<br />通知</p>
						</span>
						<span style="width: 4%;  margin-top: -18px; text-align: center;">
							<img src="../../img/index/line_03.png" height="80" />
						</span>
						<span id="dv_notice" style="width: 70%; margin-top: -12px;">
							<p style="line-height: 130%; font-size: 26px;">作业布置：1、读1000个字英语文章。2、写1000个英语单词</p>
						</span>
						<span style="width: 4%;  margin-top: -20px; text-align: center;">
							<img src="../../img/index/line_03.png" height="80" />
						</span>
						<span style="width: 8%; text-align: center;">
							<a href="html/mycenter/job-notice.html"><img src="../../img/index/more-dot_03.png" /></a><br />
						</span>
					</div>
				</div>
				<br />
				<!--
                	作者：xuzhao_deng@sina.com
                	时间：2016-12-01
                	描述：导航
                -->
				<div id="dv_nav" style="text-align: center; width: 100%; height: 66px; display: flex; color: black; margin-top: 20px; font-size: 15px;">
					<div style="width: 20%; text-align: center; margin-top: -10px;" align="center">
						<a href="html/jzkt/jzkt-index.html" style="color: black;"><img src="../../img/index/jiazhangketang_11.png" style="height: 42px; width: 42px;"/><br />
							<span>家长课堂</span></a>
					</div>
					<div style="width: 20%; text-align: center; margin-top: -10px;">
						<a href="html/plan/plan-index.html?grade=1" style="color: black;">
							<img src="../../img/index/chengzhangguihua_08.png" style="height: 42px; width: 42px;" /> <br />
							<span>关注唤醒</span></a>
					</div>
					<div style="width: 20%; text-align: center; margin-top: -10px;">
						<!--
                        	作者：xuzhao_deng@sina.com
                        	时间：2016-12-20
                        	描述：href="http://m.qlchat.com/live/280000178349270.htm"
                        -->
						<a id="ql-hall" style="color: black;">
							<img src="../../img/index/zixun_03.png" style="height: 42px; width: 42px;" /> <br />
							<span>直播大厅</span></a>
					</div>
					<div style="width: 20%; text-align: center; margin-top: -10px;">
						<a href="html/zxdt/advhall-index.html" style="color: black;">
							<img src="../../img/index/zixunshi60_03.png" style="height: 42px; width: 42px;" /> <br />
							<span>咨询大厅</span></a>
					</div>
					<div style="width: 20%; text-align: center; margin-top: -10px;">
						<img src="../../img/index/jiaxiaogongyu_05.png" style="height: 42px; width: 42px;" />
						<br />
						<span>家校共育</span>
					</div>
				</div>
				<hr color="#E9E9E9" style="height: 1px;" />
				<!--
                	作者：xuzhao_deng@sina.com
                	时间：2016-12-01
                	描述：首页动态列表
                -->
				<div>
					<div id="dv_home_content_bor">
						<ul style="list-style: none; display: none;" id="dv-login-home-content">
							<li>
								<div id="dv_newest_content" style="display: flex; width: 100%;">
									<div style="width: 15%; height: 100px; text-align: center;">
										<img src="../../img/wxy/weixiaoyuanguanggao_02.png" height="100" width="100" style="border-radius: 10%; overflow: hidden;" /><br />
										<span>&nbsp;&nbsp;&nbsp;&nbsp;班主任</span>
									</div>
									<div style="width: 70%; padding-left: 10px;">
										<br /><br />
										<div id="dv_home_content1">
											<p style="font-size: 28px; line-height: 130%; text-indent: 2em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;">
												嗟乎！一人之心，千万人之心也。秦爱纷奢，人亦念其家；奈何取之尽锱铢，用之如泥沙？使负栋之柱，多于南亩之农夫；架梁之椽，多于机上之工女；钉头磷磷，多于在庾之粟粒；瓦缝参差，多于周身之帛缕；直栏横槛，多于九土之城郭；管弦呕哑，多于市人之言语。使天下之人，不敢言而敢怒；独夫之心，日益骄固。戍卒叫，函谷举；楚人一炬，可怜焦土。 呜呼！灭六国者，六国也，非秦也。族秦者，秦也，非天下也。嗟乎！使六国各爱其人，则足以拒秦；使秦复爱六国之人，则递三世可至万世而为君，谁得而族灭也？秦人不暇自哀，而后人哀之；后人哀之而不鉴之，亦使后人而复哀后人也。
											</p>
										</div>
									</div>
									<div style="width: 15%;"></div>
								</div>
							</li>

							<li>
								<div id="dv_newest_content" style="display: flex; width: 100%;">
									<div style="width: 15%; text-align: center;">

									</div>
									<div style="width: 70%; padding-left: 10px;">
										<br /><br />
										<div id="dv_home_content1">
											<p style="font-size: 28px; line-height: 130%; text-indent: 2em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;">
												嗟乎！一人之心，千万人之心也。秦爱纷奢，人亦念其家；奈何取之尽锱铢，用之如泥沙？使负栋之柱，多于南亩之农夫；架梁之椽，多于机上之工女；钉头磷磷，多于在庾之粟粒；瓦缝参差，多于周身之帛缕；直栏横槛，多于九土之城郭；管弦呕哑，多于市人之言语。使天下之人，不敢言而敢怒；独夫之心，日益骄固。戍卒叫，函谷举；楚人一炬，可怜焦土。 呜呼！灭六国者，六国也，非秦也。族秦者，秦也，非天下也。嗟乎！使六国各爱其人，则足以拒秦；使秦复爱六国之人，则递三世可至万世而为君，谁得而族灭也？秦人不暇自哀，而后人哀之；后人哀之而不鉴之，亦使后人而复哀后人也。
											</p>
										</div>
									</div>
									<div style="width: 15%; text-align: center;">
										<img src="../../img/wxy/weixiaoyuanguanggao_02.png" height="100" width="100" style="border-radius: 10%; overflow: hidden;" /><br />
										<span>&nbsp;&nbsp;欧my嘎嘎</span>
									</div>
								</div>
							</li>
						</ul>

						<!--
                        	作者：xuzhao_deng@sina.com
                        	时间：2016-12-09
                        	描述：首页文章推荐列表
                        -->
                        <div id="dv-good-art-rec" style="margin: 5px 10px 0px 10px;">
                        	<!--
                            	作者：xuzhao_deng@sina.com
                            	时间：2016-12-17
                            	描述：加载区
                            -->
                        	<!--<div style="margin-bottom: 40px; display: block;">
                        		<span>鲁冰孙漂游记。。。。</span>
                        		<img src="../../img/jzkt/yuantiao.jpg" style="width: 100%; height: 130px;" />
                        		<div style="font-size: 16px;">
                        			<span style="float: left;">作者：郭襄</span>
                        			<span style="float: right;"><img src="../../img/wxy/yangjing_03.png"/>&nbsp;000</span>
                        		</div>
                        	</div>-->
                        </div>

					</div>

					<div id="dv_home_cont_pf">
						<div id="bottomPopover" class="mui-popover mui-popover-bottom" style="width: 120px; height: 250px; filter:alpha(opacity=0.5);">
							<div class="mui-popover-arrow"></div>
							<div class="mui-scroll-wrapper" style="filter:alpha(opacity=0.5);">
								<div class="mui-scroll">
									<ul class="mui-table-view">
										<li class="mui-table-view-cell">
											<a href="#"><img src="../../img/index/month_03.png" style="height: 90px; width: 90px;"></a>
										</li>
										<li class="mui-table-view-cell">
											<a href="#"><img src="../../img/index/write_03.png" style="height: 90px; width: 90px;"></a>
										</li>
									</ul>
								</div>
							</div>
						</div>

						<!--
                        	作者：xuzhao_deng@sina.com
                        	时间：2016-12-06
                        	描述：
                        -->
						<div id="dv-xuangua-right" style="float: right; margin-bottom: 10px; margin-right: 20px; display: none;">
							<a href="#bottomPopover" class="mui-btn mui-btn-link mui-pull-right">
								<img src="../../img/index/flo-icon_03.png" style="width: 81px; height: 83px;" />
							</a>
						</div>

					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="../../js/utils/http.utils.js"></script>
	<script>
	
		
		//文章列表模板
		function fun_artTemplate(art){
			var $aut;
			var $rnum;
			if(art.author != null && art.author != ""){
				$aut = art.author;
			} else {
				$aut = "345教育";
			}
			
			if(art.readCount != null && art.readCount != ""){
				$rnum = art.author;
			} else {
				$rnum = "0";
			}
			
			var $art_Lst_Template = 
			'<div style="margin-bottom: 40px; display: block;"><a href="html/article/article-detailed.html?artid='+ art.id +'" style="color: black;">'
        	+	'<span>'+ art.title +'</span>'
        	+	'<img src="' + art.thumbnail + '" style="width: 100%; height: 150px;" alt="无此图片" /></a>'
        	+	'<div style="font-size: 16px;">'
        	+		'<span style="float: left;">作者：'+ $aut +'</span>'
        	+		'<span style="float: right;"><img src="../../img/wxy/yangjing_03.png"/>&nbsp;'+ $rnum +'</span>'
        	+	'</div>'
        	+'</div>';
			return $art_Lst_Template;
		}

		//窗体加载
		window.onload = function() {
			
			document.getElementById("ql-hall").href = $ql_hallUrl;
			//判断用户登录状态
			if($userLogin !== null && $userLogin !== undefined && $userLogin !== "") {
				//登录状态
				document.getElementById("dv-job-notic").style.display = "none"; //显示作业通知栏
				document.getElementById("dv-xuangua-right").style.display = "none"; // 显示右下角的图标
				document.getElementById("dv-good-art-rec").style.display = "";
				document.getElementById("dv-login-home-content").style.display = "none";
				//document.getElementById("login-userName").innerHTML = $userLogin.nickName
			} else {
				//非登录状态
				document.getElementById("dv-job-notic").style.display = "none";
				document.getElementById("dv-xuangua-right").style.display = "none";
				document.getElementById("dv-good-art-rec").style.display = "";
				document.getElementById("dv-login-home-content").style.display = "none";
			}
			
			
			mui.ajax({
				url : $request_url.getArticleLst,
				type : "get",
				dataType : "json",
				headers: {
					"Authorization": $headers_authorization
				},
				data : {
					typeCode : "",
					orgId : "",
					recommend : true,
					rows : 5,
					page : 0
				},
				success : function(dat){
					if(dat.code == 0){
						var $artArray = dat.result;
						var $dv_goodArt = document.getElementById("dv-good-art-rec");
						for(var i = 0; i < $artArray.length; i ++){
							var $artInfo = $artArray[i];
							var div =document.createElement('div');
							div.innerHTML = fun_artTemplate($artInfo);
							$dv_goodArt.appendChild(div);
						}
					} else {
						mui.toast(dat.message);
					}
				}, error : function(err){
					mui.toast("......");
				}
			});
		}
		 
		function func_close() {
			document.getElementById("dv_posts").style.display = "none";
			document.getElementById("dv_posts_h").style.display = "";
		}

		document.getElementById("a_xianshi_posts").addEventListener("tap", function() {
			document.getElementById("dv_posts").style.display = "";
			document.getElementById("dv_posts_h").style.display = "none";
		});
		
	</script>

</html>